<!--
我们可以使用 v-model 指令在状态和表单输入之间创建双向绑定。
-->
<script setup lang="ts">
import { ref } from "vue";

const text = ref("Edit me");
const checked = ref(true);
const checkedNames = ref(["Jack"]);
const picked = ref("One");
const selected = ref("A");
const multiSelected = ref(["A"]);
</script>

<template>
    <h1>我们可以使用 v-model 指令在状态和表单输入之间创建双向绑定</h1>

    <h2>Text Input</h2>
    <input v-model="text" /> {{ text }}

    <h2>Checkbox</h2>
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">Checked: {{ checked }}</label>

    <!--多个复选框可以绑定到相同的 v-model 数组 -->
    <h2>Multi Checkbox</h2>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
    <label for="mike">Mike</label>
    <p>Checked names:</p>
    <pre>{{ checkedNames }}</pre>

    <h2>Radio</h2>
    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>
    <br />
    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
    <br />
    <span>Picked: {{ picked }}</span>

    <h2>Select</h2>
    <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>

    <h2>Multi Select</h2>
    <select v-model="multiSelected" multiple style="width: 100px">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ multiSelected }}</span>
</template>

<style>
h1 {
    color: blue;
}
</style>
